<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div class="set" style="height: 100%;">
        <div class="main_rightTop">
            <p>已发公告</p>
        </div>
        <div class="main_rightMain">
            <div class="noticNav">
                <span>标题</span><span>状态</span>
            </div>
            <ul>
                <li v-for="(item,index) in dataList" :key="index">
                    <p @click="titleClick(index)">{{item.notice.title}}</p>
                    <div style="overflow: hidden;margin-left: 24px;">
                        <div class="biaoti">
                            <span class="grayfont">{{item.notice.sendTime | timeFun}}</span>
                            <span :title="item.notice.author" class="grayfont namespan">{{item.notice.author}}</span>
                            <!-- <span class="borderStyle" style="margin-left: 64px;" @click="stick(index)">置顶</span>
                            <span class="borderStyle" style="margin-left: 8px;">保密</span> -->
                        </div>
                        <div v-show='item.unread != 0' class="unread grayfont"><span>{{item.read}}人已读</span><span style="margin-left: 8px;">{{item.unread}}人未读</span></div>
                        <div v-show="item.unread == 0"  class="unread grayfont"><span>全部人已读</span></div>
                    </div>
                </li>
                <!-- 暂无数据 -->
                <div class="noList" v-show="dataList.length == 0">
                    <div>
                        暂无公告
                    </div>
                </div>
            </ul>
            <!-- 底部分页 -->
            <div class="lastLi" v-show="dataList.length > 0">
                <div>
                    
                </div>
                <div>
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    small
                    layout="prev, pager, next"
                    :total="totalNum">
                </el-pagination>
                </div>
            </div>
        </div>
        <!--公告预览弹出框-->
        <div class="ModalsBox" v-show="ispreview">
            <div class="Modals">
                <div class="modaltitle">公告预览</div>
                <div class="modalcontent">
                    <h3>{{noticeTitle}}</h3>
                    <p style="margin-top: 10px;margin-bottom: 24px;color:#8F8E94"><span style="margin-right: 16px;" v-show="author != ''">{{author}}</span><span>{{date | timeFun}}</span></p>
                    <div class="imgbox" v-show="defaultImg_1 != '/static/img/123.png'"><img :src="defaultImg_1" alt=""></div>
                    <p v-html="content" class="contentBox">
                    </p>
                    <!-- <p style="height: 36px;line-height: 36px;color: #8f8e94;">附件：</p>
                    <ul>
                        <li v-for="(item,index) in items">
                            <div><span>{{item.name}}</span></div>
                        </li>
                    </ul> -->

                </div>
                <div class="modalfooter">
                    <input type="button" value="关闭" @click="cancle">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "",
  data() {
    return {
      pageSizeNum: 10,
      currentPage: 1,
      totalNum: 0,
      dataList: [],
      oid: "",
      uid: "",
      ispreview: false, //预览弹框是否显示
      noticeTitle: "", //预览弹框的标题
      author: "", //预览弹框的作者
      defaultImg_1: "/static/img/123.png", //预览弹框的图片
      content: "", //预览弹框的内容
      date: "" //预览弹框的日期
    };
  },
  filters: {
    // 过滤时间
    timeFun: function(val) {
      if (val) {
        var standardTime = new Date(val);
        var y, m, d, h, f;
        y = standardTime.getFullYear();
        m = standardTime.getMonth() + 1;
        m = m > 9 ? m : "0" + m;
        d = standardTime.getDate();
        d = d > 9 ? d : "0" + d;
        h = standardTime.getHours();
        h = h > 9 ? h : "0" + h;
        f = standardTime.getMinutes();
        f = f > 9 ? f : "0" + f;
        return y + "-" + m + "-" + d + " " + h + ":" + f;
      } else {
        return "暂无";
      }
    }
  },
  created: function() {
    if (sessionStorage.getItem("orgId") == undefined) {
      return;
    }
    // 若此人中途无权限，则跳到登录页
    this.getbusiness({
      oid: sessionStorage.getItem("orgId"),
      uid: sessionStorage.getItem("userId")
    })
      .then(data => {
        if (data.code == "100005") {
          this.$message({
            type: "info",
            message: "对不起，没有权限"
          });
          this.$router.push({
            path: "/login"
          });
        }
      })
      .catch(msg => {
        if (JSON.parse(msg.bodyText).code == "188888") {
          this.$message({
            type: "info",
            message: JSON.parse(msg.bodyText).msg
          });
          this.$router.push({
            path: "/login"
          });
        } else {
          this.$message({
            type: "info",
            message: "服务器错误!"
          });
        }
      });
    this.oid = sessionStorage.getItem("orgId");
    this.uid = sessionStorage.getItem("userId");
    this.getnoticeListFun();
  },
  watch: {},
  methods: {
    // 获取公告列表
    getnoticeListFun() {
      var self = this;
      self
        .getapinoticenoticelist({
          current: self.currentPage,
          size: self.pageSizeNum,
          oid: self.oid
        })
        .then(data => {
          if (data.code == "000000") {
            self.dataList = data.data.records;
            self.totalNum = data.data.total;
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    // 取消弹框
    cancle() {
      this.ispreview = false;
    },
    // 点击公告标题进行预览
    titleClick(index) {
      var self = this;
      self.ispreview = true;
      self
        .getapinoticenoticeinfo({
            id:self.dataList[index].notice.id
        })
        .then(data => {
          if (data.code == "000000") {
              self.noticeTitle = data.data.notice.title
              self.author = data.data.notice.author
              self.date = data.data.notice.sendTime
              self.content = data.data.notice.content
              if(data.data.notice.image == 'https://web.botong.tech/resource/img/notice.png' || data.data.notice.image == ''){
                self.defaultImg_1 = '/static/img/123.png'
              }else{
                self.defaultImg_1 = data.data.image
              }
          } else {
            self.$message(data.msg);
          }
        })
        .catch(msg => {
          if (JSON.parse(msg.bodyText).code == "188888") {
            this.$message({
              type: "info",
              message: JSON.parse(msg.bodyText).msg
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            this.$message({
              type: "info",
              message: "服务器错误!"
            });
          }
        });
    },
    //分页
    handleSizeChange(val) {
      //   this.pageSizeNum = val;
      //   this.getnoticeListFun();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getnoticeListFun();
    },
    // 置顶
    stick(index) {
      var a = this.dataList[index];
      this.dataList.splice(index, 1);
      this.dataList.unshift(a);
    },
    ...mapActions(["getapinoticenoticelist", "getbusiness",'getapinoticenoticeinfo'])
  }
};
</script>
<style scoped>
.main_rightTop p {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
}

.main_rightTop {
  width: 100%;
}

.main_rightMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.noticNav {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: #f4f4f6;
  margin-top: 20px;
}

.noticNav span:nth-child(1) {
  float: left;
  margin-left: 24px;
}

.noticNav span:nth-child(2) {
  float: right;
  margin-right: 134px;
}
ul li {
  height: 56px;
  border-bottom: 1px solid #d9d9d9;
}
ul li > p {
  height: 28px;
  line-height: 28px;
  margin-left: 24px;
  cursor: pointer;
}
.biaoti {
  float: left;
}
.biaoti span{
 float: left;
}
.unread {
  float: left;
  margin-left: 298px;
}
.grayfont {
  color: #8f8e94;
}
.borderStyle {
  cursor: pointer;
  font-size: 12px;
  color: #fcb298;
  width: 48px;
  display: inline-block;
  border: 1px solid #fcb298;
  height: 20px;
  line-height: 20px;
  border-radius: 17px;
  text-align: center;
}
.lastLi {
  height: 60px;
  display: flex;
  justify-content: space-between;
  margin: 35px 0;
}
.noList div {
  color: #ccc;
  text-align: center;
  margin: 50px;
}
/* 公告预览弹框 */
h3 {
  margin: 0;
  font-size: 14px;
}

.Modals {
  background: #fff;
  box-shadow: 0 5px 14px #cccccc;
  width: 640px;
  height: 744px;
}

.modaltitle {
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 2px 5px #ccc;
}

.modalcontent {
  padding: 20px 30px 0 30px;
  height: 582px;
  overflow-y: auto;
}

.imgbox {
  width: 100%;
  height: 280px;
}

.imgbox img {
  width: 100%;
  height: 100%;
}
.modalcontent ul li {
  width: 100%;
  border: 1px solid #d9d9d9;
  height: 36px;
  line-height: 36px;
  margin-top: 6px;
  padding-left: 12px;
}
.modalfooter {
  text-align: center;
  margin: 32px;
}
.modalfooter input {
  width: 80px;
  height: 34px;
  line-height: 34px;
  background: #aeaeae;
  font-size: 16px;
  color: #fff;
}
.contentBox{
    margin-top:24px;border-bottom:1px solid #d9d9d9;padding-bottom: 24px;
    word-break: break-word;
}
/* ---------------- */
.namespan{
    margin-left: 18px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>




